<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Geeknius - Creative Personal CV/Resume HTML Template">
  <meta name="author" content="Themesmile">
  <title>Geeknius Bootstrap Template - Index</title>
  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png.html" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Manrope:wght@200;300;400;600;700;800&amp;display=swap"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">


  <!-- Template Main CSS File -->
  <link href="assets/css/theme.css" rel="stylesheet">
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>

<body>
  <aside>
    <nav class="nav-menu d-none d-lg-none">
      <div class="header-menu">
        <ul class="social-icon">
          <li class="social"><a href=""><i class="ri-twitter-line"></i></a></li>
          <li class="social"><a href=""><i class="ri-instagram-line"></i></a> </li>
          <li class="social"><a href=""><i class="ri-dribbble-line"></i></a> </li>
        </ul>
      </div>
      <ul>
        <li class="active"><a href="#header">Home</a></li>
        <li><a href="#we-do">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#experience">Experience</a></li>
        <li><a href="#features">Skills</a></li>
        <li><a href="#testimonials">testimonials</a></li>
        <li><a href="#blog-news">News</a></li>
        <li><a href="#contact">Contactan</a></li>
      </ul>
      <div class="footer-menu"><a href="#blog-news">© Themesmile. 2020. <br>All Rights Reserved.</a></div>
    </nav><!-- .nav-menu -->
  </aside>
  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container-fluid d-flex align-items-center">
      <div class="logo mr-auto">
        <h1 class="text-light"><a href="index.html">
            geeknius.
          </a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="index.html"><img src="assets/img/logo-12.svg" alt="" class="class="logo-2"></a>-->
        <ul>
          <li><a href="#"><i class="ri-phone-line"></i>+98 76-54-1423</a></li>
          <li><a href="#"><i class="ri-mail-open-line"></i>sayhai@domain.com</a></li>
        </ul>
      </div>
      <div class="nav-submenu d-lg-block d-flex align-items-center justify-content-center align-self-center">
        <ul>
          <li><input class="container_toggle" type="checkbox" id="switch" name="mode" /><label for="switch"></label>
          </li>
        </ul>
      </div>
    </div>
  </header><!-- End Header -->


  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex align-items-center">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-lg-5 justify-content-center">
          <h3>
            I'm Fullstack Designer
          </h3>
          <h2 class="name-headline">Hi, my name is<br> <span>Thomas.</span>
          </h2>
          <p>Founder of Geeknius. Been more than 7 years in this industry. My
            background is IT education and self-taught
            web designing skills.</p>
          <p> Let's create something extraordinary!</p>

          <div>
            <a href="#about" class="btn-get-started-solid scrollto">支持我</a>
            <button data-lw-onclick=".lw-widget" class="btn-get-started scrollto">立即购买</button>
          </div>
        </div>

        <div class="col-lg-6 hero-img">

          <lottie-player src="assets/img/drawkit-grape-animation-2-LOOP.json" background="transparent" speed="1" id="bm"
            loop autoplay></lottie-player>
        </div>

      </div>
    </div>
  </section><!-- End Hero -->


  <!-- ======= Clients Section ======= -->
  <section id="clients" class="clients clients">
    <h2 class="testi-title">TRUSTED BY EXPERTS AT</h2>
    <div class="container">

      <div class="row justify-content-md-center">

        <div class="col-sm col-6">
          <img src="assets/img/logo-1.svg" class="img-fluid" alt="">
        </div>

        <div class="col-sm col-6">
          <img src="assets/img/logo-2.svg" class="img-fluid" alt="">
        </div>

        <div class="col-sm col-6">
          <img src="assets/img/logo-3.svg" class="img-fluid" alt="">
        </div>

        <div class="col-sm col-6">
          <img src="assets/img/logo-5.svg" class="img-fluid" alt="">
        </div>

        <div class="col-sm col-6">
          <img src="assets/img/logo-7.svg" class="img-fluid" alt="">
        </div>

        <div class="col-sm col-6">
          <img src="assets/img/logo-1.svg" class="img-fluid" alt="">
        </div>



      </div>

    </div>
  </section><!-- End Clients Section -->
  <!-- ======= My Services Section ======= -->
  <section id="we-do" class="d-flex align-items-center">
    <div class="container position-relative aos-init aos-animate">
      <div class="section-title">
        <h6>Services</h6>
        <h2>What <strong>we do</strong></h2>
        <p>It doesn’t matter how great your product or service<br> is if your copy does not captivate your audience.
        </p>
      </div>
      <div class="row icon-boxes">
        <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0 aos-init aos-animate">
          <div class="icon-box">
            <div class="icon"><i class="ri-scan-2-line" style="color: #353ae0;"></i>
            </div>
            <h4 class="title"><a href="">Research</a></h4>
            <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
            <a class="learn-more" href="#">Learn more</a>
          </div>
        </div>

        <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0 aos-init aos-animate">
          <div class="icon-box">
            <div class="icon"><i class="ri-ball-pen-line" style="color: #d935dc;"></i>
            </div>
            <h4 class="title"><a href="">Write</a></h4>
            <p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
            <a class="learn-more" href="#">Learn more</a>
          </div>
        </div>

        <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0 aos-init aos-animate">
          <div class="icon-box">
            <div class="icon"><i class="ri-magic-line" style="color: #ff7907"></i></div>
            <h4 class="title"><a href="">Develope</a></h4>
            <p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
            <a class="learn-more" href="#">Learn more</a>

          </div>
        </div>

        <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0 aos-init aos-animate">
          <div class="icon-box">
            <div class="icon"><i class="ri-base-station-line" style="color:#76a728;"></i></div>
            <h4 class="title"><a href="">Promote</a></h4>
            <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
            <a class="learn-more" href="#">Learn more</a>
          </div>
        </div>

      </div>
    </div>
  </section><!-- End My Services Section -->
  <!-- ======= Portfolio Section ======= -->
  <section id="portfolio" class="portfolio">
    <div class="container">

      <div class="row">
        <div class="col-lg-4">
          <div class="section-title">

            <h2 class="text-left">Portfolio</h2>
            <ul id="portfolio-flters">
              <li data-filter="*" class="filter-active">All</li>

              <li data-filter=".filter-app">App</li>

              <li data-filter=".filter-card">Designs</li>

              <li data-filter=".filter-wrtiting">Writing</li>
            </ul>
            <p class="text-left">It doesn’t matter how great your product<br> or service
              is if your copy does not captivate <br>your audience</p>
          </div>

        </div>

        <div class="col-lg-8">
          <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="400">
            <div class="col-lg-8 col-md-6 portfolio-item filter-app">
              <div class="portfolio-wrap">
                <img
                  src="https://images.pexels.com/photos/163811/street-art-shipping-container-freight-highway-163811.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>App 1</h4>
                  <p>App</p>
                  <div class="portfolio-links">
                    <a href="https://images.pexels.com/photos/163811/street-art-shipping-container-freight-highway-163811.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260"
                      data-gall="portfolioGallery" class="venobox" title="App 1"><i class="ri-eye-line"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6 portfolio-item filter-wrtiting">
              <div class="portfolio-wrap">
                <img
                  src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1351&amp;q=80"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Web 3</h4>
                  <p>Web</p>
                  <div class="portfolio-links">
                    <a href="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1351&amp;q=80"
                      data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="ri-eye-line"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6 portfolio-item filter-app">
              <div class="portfolio-wrap">
                <img
                  src="https://images.unsplash.com/photo-1553531580-652231dae097?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=813&amp;q=80"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>App 2</h4>
                  <p>App</p>
                  <div class="portfolio-links">
                    <a href="https://images.unsplash.com/photo-1553531580-652231dae097?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=813&amp;q=80"
                      data-gall="portfolioGallery" class="venobox" title="App 2"><i class="ri-eye-line"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-8 col-md-6 portfolio-item filter-card">
              <div class="portfolio-wrap">
                <img
                  src="https://images.unsplash.com/photo-1553531768-4ce3fb0b07fe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Card 2</h4>
                  <p>Card</p>
                  <div class="portfolio-links">
                    <a href="https://images.unsplash.com/photo-1553531768-4ce3fb0b07fe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80"
                      data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="ri-eye-line"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 portfolio-item filter-wrtiting">
              <div class="portfolio-wrap">
                <img
                  src="https://images.unsplash.com/photo-1524668951403-d44b28200ce0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1267&amp;q=80"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Web 2</h4>
                  <p>Web</p>
                  <div class="portfolio-links">
                    <a href="https://images.unsplash.com/photo-1524668951403-d44b28200ce0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1267&amp;q=80"
                      data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="ri-eye-line"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 portfolio-item filter-app">
              <div class="portfolio-wrap">
                <img
                  src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80"
                  class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>App 3</h4>
                  <p>App</p>
                  <div class="portfolio-links">
                    <a href="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80"
                      data-gall="portfolioGallery" class="venobox" title="App 3"><i class="ri-eye-line"></i></a>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </section><!-- End Portfolio Section -->

  <!-- ======= Experience Section ======= -->
  <section id="experience" class="experience">
    <div class="container">
      <div class="row justify-content-between aos-init aos-animate">
        <div class="col-md-3 d-flex align-content-top flex-wrap">
          <div class="section-title aos-init aos-animate">
            <h6 class="text-left">Working with</h6>
            <h2 class="text-left">Experience</h2>
            <p class="text-left">Necessitatibus eius consequatur ex aliquid fuga eum quidem, It doesn’t matter how
              great your product or service
              is if your copy does not captivate your audience.<br>
              <a href="#" class="btn-get-started-solid">Download Resume</a></p>
          </div>
        </div>


        <div class="col-md-8">
          <div class="row experience-item align-items-stretch">
            <div class="col-lg-6">
              <i class="ri-terminal-window-line"></i>
              <h6>Present</h6>
              <h4>Web designer & Front End</h4>
            </div>
            <div class="col-lg-6">
              <p>
                Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc
                vel
                risus commodo viverra maecenas accumsan.
              </p>
            </div>
          </div><!-- End Experience Item-->

          <div class="row experience-item d-flex align-items-stretch">
            <div class="col-lg-6">
              <i class="ri-a-b"></i>
              <h6>Jan 2015 - Dec 2018</h6>
              <h4>Copywriting & UX Researcher</h4>
            </div>
            <div class="col-lg-6">
              <p>
                Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur
                gravida.
                Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
              </p>
            </div>
          </div><!-- End Experience Item-->
          <div class="row experience-item d-flex align-items-stretch">
            <div class="col-lg-6">
              <i class="ri-drag-drop-line"></i>
              <h6>Jan 2015 - Dec 2018</h6>
              <h4>Graphic Designer & UI Designer</h4>
            </div>
            <div class="col-lg-6">
              <p>
                Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id
                donec
                ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium.
              </p>
            </div>
          </div><!-- End Experience Item-->
        </div>
      </div>
    </div>
  </section><!-- End Experience Section -->


  <!-- ======= Features Section ======= -->
  <section id="features" class="features">
    <div class="container">
      <div class="row">
        <div class="col-md-8 d-flex align-items-stretch mt-4">
          <div class="row">
            <div class="col col-lg-5 col-md-12 col-sm-12 col-xs-12 mt-md-0">
              <div class="icon-box">
                <i class="ri-angularjs-line"></i>
                <h3><a href="">Angular</a><strong>80%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-6 col-md-12 col-sm-12 col-xs-12 mt-4 mt-md-0">
              <div class="icon-box">
                <i class="ri-reactjs-line"></i>
                <h3><a href="">React</a><strong>90%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12 mt-4 ">
              <div class="icon-box">

                <i class='bx bxl-nodejs'></i>
                <h3><a href="">Node JS</a><strong>60%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-5 col-md-12 col-sm-12 col-xs-12 mt-4 mt-md-8">
              <div class="icon-box">

                <i class="ri-ubuntu-line"></i>
                <h3><a href="">Management</a><strong>70%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-5 col-md-12 col-sm-12 col-xs-12 mt-4 mt-md-6">
              <div class="icon-box">
                <i class="ri-eye-2-line"></i>
                <h3><a href="">Analytics</a><strong>90%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-5 col-md-12 col-sm-12 col-xs-12 mt-4">
              <div class="icon-box">
                <i class="ri-lightbulb-flash-line"></i>
                <h3><a href="">Brainstroming</a><strong>60%</strong></h3>
              </div>
            </div>
            <div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12 mt-4">
              <div class="icon-box">
                <i class="ri-scissors-cut-fill"></i>
                <h3><a href="">Execution</a><strong>100%</strong></h3>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4 d-flex align-content-center flex-wrap">
          <div class="section-title">
            <h6 class="text-left">Skills</h6>
            <h2 class="text-left">Creative Works</h2>
            <p class="text-left">Necessitatibus eius consequatur ex aliquid fuga eum quidem, It doesn’t matter how
              great your product or service
              is if your copy does not captivate your audience.</p>
          </div>
        </div>
      </div>
    </div>
  </section><!-- End Features Section -->





  <!-- ======= Testimonials Section ======= -->
  <section id="testimonials" class="testimonials section-bg">
    <div class="container">
      <div class="section-title">
        <h4 class="testi-title">Testimonial</h4>
        <h2>In their own words</h2>
      </div>
      <div class="owl-carousel testimonials-carousel" data-aos="fade-up" data-aos-delay="200">
        <div class="testimonial-wrap">

          <div class="testimonial-item">

            <img src="https://randomuser.me/api/portraits/men/3.jpg" class="testimonial-img" alt="">
            <div class="text-testimonial">
              <p>

                <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium
                quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
              </p>

              <h3>Saul Goodman</h3>
              <h4>Ceo And Founder</h4>
            </div>
          </div>

        </div>
        <div class="testimonial-wrap">
          <div class="testimonial-item">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" class="testimonial-img" alt="">
            <div class="text-testimonial">
              <p>
                <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis
                quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
              </p>

              <h3>Sara Wilsson</h3>
              <h4>Designer</h4>
            </div>
          </div>
        </div>
        <div class="testimonial-wrap">
          <div class="testimonial-item">
            <img src="https://randomuser.me/api/portraits/women/16.jpg" class="testimonial-img" alt="">
            <div class="text-testimonial">


              <p>
                <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim
                tempor
                labore quem eram duis noster aute amet eram fore quis sint minim.
                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
              </p>

              <h3>Jena Karlis</h3>
              <h4>Store Owner</h4>
            </div>
          </div>
        </div>

        <div class="testimonial-wrap">
          <div class="testimonial-item">
            <img src="https://randomuser.me/api/portraits/men/35.jpg" class="testimonial-img" alt="">
            <div class="text-testimonial">
              <p>
                <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit
                minim
                dolor enim duis veniam ipsum anim magna sunt elit fore quem.
                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
              </p>

              <h3>Matt Brandon</h3>
              <h4>Freelancer</h4>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section><!-- End Testimonials Section -->

  <!-- ======= Blog News Section ======= -->
  <section id="blog-news" class="blog-news">
    <div class="container">
      <div class="section-title aos-init aos-animate">
        <h6 class="text-left">News</h6>
        <h2 class="text-left">Get news feed <small>See all</small></h2>
      </div>
      <div class="row">

        <div class="col-sm-12 col-lg-3 col-12">
          <div class="card"
            style='background-image: url("https://images.unsplash.com/photo-1502014822147-1aedfb0676e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80");'
            data-aos="fade-up" data-aos-delay="100">
            <div class="card-body-second">
              <h6 class="card-text">26 May 2020 / Design</h6>
              <h5 class="card-title"><a href="#">Necessitatibus consequatur ex aliquid fuga eum quidem.</a></h5>

              <div class="read-more"><a href="#"> Read more</a></div>
            </div>
          </div>

        </div>
        <div class="col-sm-12 col-lg-3 col-12">
          <div class="card"
            style='background-image: url("https://images.unsplash.com/photo-1505515888495-c1897b0b5740?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");'
            data-aos="fade-up" data-aos-delay="100">
            <div class="card-body-second">
              <h6 class="card-text">26 May 2020 / Projects</h6>
              <h5 class="card-title"><a href="#">It doesn’t matter how great your product</a></h5>
              <div class="read-more"><a href="#">Read more</a></div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-lg-6 col-12">
          <div class="card"
            style='background-image: url("https://images.unsplash.com/photo-1510070009289-b5bc34383727?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");'
            data-aos="fade-up" data-aos-delay="100">
            <div class="card-body">
              <h6 class="card-text">26 May 2020 / News update</h6>
              <h5 class="card-title"><a href="#">Does any company face more complex marketing / sales ?</a></h5>

              <div class="read-more"><a href="#">Read more</a></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
  <!-- End Blog News Section -->
  <!-- ======= Services Section ======= -->
  <section id="services" class="services">
    <div class="container">

      <div class="section-title">
        <h6>Stay connected</h6>
        <h2>What <strong>Next ?</strong></h2>
        <p>It doesn’t matter how great your product or service<br> is if your copy does not captivate your audience.
        </p>
      </div>

      <div class="row">
        <div class="col-md-12 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
          <div class="icon-box">
            <div class="icon">01</div>

            <div class="icon-box-img" id="stepOne">
              <lottie-player src="assets/img/drawkit-grape-animation-8-LOOP.json" background="transparent" speed="0.8"
                id="bm" loop autoplay></lottie-player>
            </div>
            <h4 class="title"><a href="">Filout</a></h4>
            <p class="description">The Simple Contact Form Below. Justo eget magna fermentum </p>

            <div class="read-more"><a href="#">Get Started</a></div>
          </div>

        </div>

        <div class="col-md-12 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
          <div class="icon-box">
            <div class="icon">02</div>
            <div class="icon-box-img" id="stepTwo">
              <lottie-player src="assets/img/drawkit-grape-animation-7-LOOP.json" background="transparent" speed="0.8"
                id="bm" loop autoplay></lottie-player>


            </div>

            <h4 class="title"><a href="">Check</a></h4>
            <p class="description">Your Inbox Within
              <br>24 Hours iaculis eu non diam </p>
            <div class="read-more"><a href="#">Learn more</a></div>

          </div>
        </div>

        <div class="col-md-12 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
          <div class="icon-box">
            <div class="icon">03</div>
            <div class="icon-box-img" id="stepThree">
              <lottie-player src="assets/img/drawkit-grape-animation-6-LOOP.json" background="transparent" speed="0.8"
                id="bm" loop autoplay></lottie-player>
            </div>
            <h4 class="title"><a href="">Submit</a></h4>
            <p class="description">The Attached Creative<br> Brief Justo eget magna fermentum</p>

            <div class="read-more"><a href="#">Learn more</a></div>

          </div>
        </div>
      </div>

    </div>
  </section><!-- End Services Section -->


  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-lg-4 col-md-12">
          <div class="contact-about">
            <h6 class="text-left">You know to find us</h6>
            <h3 class="text-left">Contact.
            </h3>

          </div>

          <div class="info">
            <div>
              <i class="ri-map-pin-fill"></i>
              <h4>Get me here</h4>
              <p>A108 Adam Street New York, NY 535022</p>
            </div>

            <div>
              <i class="ri-mail-unread-fill"></i>
              <h4>Get in touch</h4>
              <p>info@example.com</p>
            </div>
            <div>
              <i class="ri-phone-fill"></i>
              <h4>Call me now</h4>
              <p>+589 5548 855</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="contact-about">
            <h6 class="text-left">Get in touch our online services</h6>
            <h4 class="text-left">Ready to get started? Let's create something
              extraordinary!
            </h4>
            <p>Cras fermentum odio eu feugiat. Justo eget magna fermentum iaculis eu non diam phasellus. Scelerisque
              felis imperdiet proin fermentum leo. Amet volutpat consequat mauris nunc congue..</p>
          </div>
          <div class="info">
            <form class="php-email-form">

              <div class="row">
                <div class="col">
                  <div class="form-group">
                    <label>Your Name :</label>
                    <input type="text" name="name" class="form-control" id="name" data-rule="minlen:4"
                      data-msg="Please enter at least 4 chars">
                    <div class="validate"></div>
                  </div>
                </div>
                <div class="col">
                  <div class="form-group">
                    <label>Your Email :</label>
                    <input type="email" class="form-control" name="email" id="email" data-rule="email"
                      data-msg="Please enter a valid email">
                    <div class="validate"></div>
                  </div>
                </div>
              </div>


              <div class="form-group">
                <label>Message :</label>
                <textarea class="form-control" name="message" rows="5" data-rule="required"
                  data-msg="Please write something for us"></textarea>
                <div class="validate"></div>
              </div>
              <div class="mb-3">
                <div class="loading">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">Your message has been sent. Thank you!</div>
              </div>
              <div class="text-left"><button type="submit">Send Message</button></div>
            </form>


          </div>

        </div>


      </div>
    </div>
  </section><!-- End Contact Section -->
  <!-- ======= Footer ======= -->
  <footer id="footer ">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 mt-4 mt-md-0 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
          <div class="contact-about">
            <h3>geeknius.</h3>
            <p>Cras fermentum odio eu feugiat. Justo eget magna <br>fermentum iaculis eu non diam phasellus.
              <br>Scelerisque
              felis imperdiet proin fermentum leo.</p>
            <br>
            <br>
            <div class="info">
              <h6 class="text-left">Follow us</h6>
              <div class="social-links">
                <a href="#" class="twitter">Twt.</a>
                <a href="#" class="facebook">Fb.</a>
                <a href="#" class="instagram">Instg.</a>
                <a href="#" class="linkedin">Link.</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg col-md-6 mt-4 mt-md-0 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
          <div class="info">
            <h6 class="text-left">Skype & podcast</h6>
            <div class="footer-links">
              <a href="#">live:geeknius</a>
              <a href="#">geektalks.spotify.com</a>
            </div>
          </div>
          <br>
          <br>
          <div class="info">
            <h6 class="text-left">Legal</h6>
            <div class="footer-links">
              <a href="#">Term & Condition</a>
              <a href="#">Privacy Policy</a>
            </div>
          </div>
        </div>

        <div class="col-lg col-md-6 mt-4 mt-md-0 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
          <div class="info">
            <h6 class="text-left">Company</h6>
            <div class="footer-links">
              <a class="scrollto" href="#header">Home</a>
              <a class="scrollto" href="#we-do">Services</a>
              <a class="scrollto" href="#portfolio">Portfolio</a>
              <a class="scrollto" href="#experience">Experience</a>
              <a class="scrollto" href="#features">Skills</a>
              <a class="scrollto" href="#testimonials">testimonials</a>
              <a class="scrollto" href="#blog-news">News</a>
              <a class="scrollto" href="#contact">Contactan</a>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 mt-4 mt-md-0 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
          <div class="info">
            <h6 class="text-left">Stay in touch</h6>
            <div class="form-group">

              <input type="email" class="form-control" name="email" id="email" data-rule="email"
                placeholder="Subcribe With Mail">

            </div>
            <lottie-player src="assets/img/drawkit-grape-animation-4-LOOP.json" background="transparent" speed="0.8"
            id="bm" loop autoplay></lottie-player>
          </div>
        </div>



      </div>

    </div>
    <div class="container">
      <div class="row d-flex align-items-center copyright-line">
        <div class="col-lg-6 text-lg-left text-center ">
          <div class="copyright ">
            &copy; 2020 .Copyright <strong>Geektheme</strong>. All Rights Reserved.
          </div>
        </div>
        <div class="col-lg-6 ">
          <nav class="footer-links-designed-by text-lg-right text-center copyright">
            Designed by <a href="#">Themesmile</a>
          </nav>
        </div>
      </div>
    </div>
  </footer><!-- End Footer -->




  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/jquery/jquery.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="assets/vendor/counterup/counterup.min.js"></script>
  <script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/venobox/venobox.js"></script>
  <script src="assets/vendor/waypoints/waypoints.menu.min.js"></script>
  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <!-- Pixel Code for https://console.trustcomet.com/ -->
  <script async src="https://widgets.6kuai6.com/common/pixels.js?id=3220d1a3-5854-4040-b410-ff9444617023"></script>
  <!-- END Pixel Code -->

</body>

</html>
